<template>
  <div class="">
	<iw-header></iw-header>
   <div class="header_box"></div>
   <!-- 测试 -->
   
   
   <!-- 轮播图组件 -->
   <!-- <carousel></carousel> -->
   <!--banner-->
   <!-- 鼠标进入轮播图停止循环，鼠标离开轮播图，开始循环 -->
 <div class="banner" @mouseenter="end()" @mouseleave="start()">
       <!-- 图片列表-->
	   <!-- 轮播图    未完待续!!!!-->
      <ul >
		   <!-- 图片加载失败 -->
		   <!-- vue中的字符串拼接与普通字符串拼接模式有些不同,需要在引号中再嵌套引号 -->
		   <!-- <li class=""  v-for="(item,i) of banners" :key="i"><router-link  to="javascript: ;"><img src="../assets/images/banner1.jpg"></img></router-link></li> -->
		   <li :class="prevP==1?'disblock':'disnone'"  ><router-link  to="javascript;" ><img src="../assets/images/banner1.jpg"></img></router-link></li> 
		   <li :class="prevP==2?'disblock':'disnone'" ><router-link  to="javascript;"><img src="../assets/images/banner2.jpg"></img></router-link></li> 
		   <li :class="prevP==3?'disblock':'disnone'" ><router-link  to="javascript;"><img src="../assets/images/banner3.jpg"></img></router-link></li> 
		   <li :class="prevP==4?'disblock':'disnone'" ><router-link  to="javascript;"><img src="../assets/images/banner4.jpg"></img></router-link></li> 
       </ul>
	   
	   
       <!-- 左右箭头 -->
    <span class="cut prev" @click="bigchange(-1)"></span>
       <span class="cut next" @click="bigchange(1)"></span>
        <!-- 小圆点指示器 -->
      <div class="indicator">
           <a  href="javascript:;" :class="prevP==i?'cur':'' " v-for="i of 4" :key="i" @click="dochange(i)"></a>
       </div> 
   </div> 
   
    <!-- 主体内容 -->
   <div class="container">
       <section class="ind_1">
           <h2 class="title"><span>最新课程</span><router-link  to="">更多</router-link></h2>
           <ul class="course clearfloat" >
               <li  v-for="i of 4" :key="i">
                   <router-link  to="" class="a_img"><img src="../assets/img-course/01.png" alt=""/></router-link>
                   <router-link  to="" class="a_text">uni-app入门到实践 以项目为导向掌握完整开发流程</router-link>
                   <p>讲师：鼻孔超人</p>
                   <strong>¥ 799.00</strong>
               </li>
               
           </ul>
       </section>
       <section class="ind_2">
           <h2 class="title"><span>热门课程</span><router-link  to="">更多</router-link></h2>
           <ul class="course clearfloat">
               <li  v-for="i of 4" :key="i">
                   <router-link  to="" class="a_img"><img src="../assets/img-course/02.png" alt=""/></router-link>
                   <router-link  to="" class="a_text">KafKa多维度系统精讲,从入门到熟练掌握</router-link>
                   <p>讲师：闪电侠</p>
                   <strong>¥ 799.00</strong>
               </li>
              
           </ul>
       </section>
       <section class="ind_3">
           <h2 class="title"><span>名师堂</span><router-link  to="">更多</router-link></h2>
           <ul class="ind_teacher clearfloat"  >
               <li v-for="i of 4" :key="i">
                   <router-link  to=""><img src="../assets/img-teacher/c1.jpg" alt=""/></router-link>
				   <router-link  to="" class="a_text">Spring Cloud+Vue前后端分离开发企业级在线视频课程系统</router-link>
                   <p>讲师：钢铁侠</p>
                   <span>主讲：Bootstrap</span>
               </li>
       
           </ul>
       </section>
   </div>
  
		

	<iw-footer></iw-footer>
  </div>
</template>

<script>
import Header from '../components/Header.vue';
import Footer from '@/components/Footer.vue';
import carousel from '../components/Carousel.vue';
export default {
	data:()=>{
		return {
			avatarFile:null,
			banners:['banner1','banner2','banner3','banner4'],
			//当前页面
			prevP:1,
			timer:null
			
			
		}
	},
	created() {
		// console.log("created",this.prevP,this.timer)
	},
	mounted(){
		this.start();
		// console.log("mounted",this.prevP,this.timer);
		//获取当前localStorage中的数据,!!!!仔细点，一个parse写成Parse让我找半个小时错
		var data=JSON.parse(localStorage.getItem('userInfo'));
		// console.log("获取本地localstorage数据",data);
		//本地数据获取之后，如果值不为null,则将数据推送到$store中
		//如果vuex中有值，就不用赋值,如果没有值，但是本地有值则赋值!!!获取$store中的数据用 this.$store.state.uerInfo别忘了state,让我找半个小时
		if(this.$store.state.userInfo.uid==undefined&&data!=undefined){
			let data1={
				uid:data.uid,
				uname:data.uname
			}
			this.$store.commit("setUserInfo",data1);
		}
	
	
	},
	methods:{
		
		start:function(){
			this.timer=setInterval(()=>{
				this.bigchange(1);
			},2000)
		},
		end:function(){
			clearInterval(this.timer)
		},
		dochange:function(i){
			this.prevP=i;
			// console.log("当前页",this.prevP);
		},
		bigchange:function(i){
			//如果当前页是最后一页，那么换到第一页
			if(this.prevP==this.banners.length&&i==1){
				this.prevP=1;
			}else if(this.prevP==1&&i==-1){
				this.prevP=this.banners.length;
			}else{
				this.prevP+=i;
			}
			
			// console.log("当前页",this.prevP);
		}
		
	},
	// 子组件
	components:{
		'iw-header':Header,
		'iw-footer':Footer,
		carousel,
	}
}	
</script>

<style>
	.disblock{
		display: block;
	}
	.disnone{
		display: none;
	}
	.banner {
	    height: 380px;
	    position: relative;
	    border-bottom: 3px solid #ddd;
	}
	
	.banner ul li {
		/* display: block; */
	    height: 100%;
	    width: 100%;
	    position: absolute;
	  /* display: none; */
	    /* z-index:10; */
	}
 	.banner ul li a {
	    display: block;
	    width: 100%;
	    height: 100%;
		/* background:#DAE0E5; */
		/* border:1px solid #000; */
	}
	.banner ul li a img{
		display:block;
		margin:0 auto;
		max-height:100%;
	}
	.banner .cut {
	    position: absolute;
	    width: 43px;
	    height: 75px;
	    opacity: 0.3;
	    top:50%;
	    margin-top: -38px;
	    left:50%;
	    background: #000 url(../assets/images/iconlist.png) no-repeat;
	    display: none;
	    z-index: 20;
	}
	.banner:hover .cut {
	    display: block;
	}
	.banner .cut:hover {
	    opacity: 0.5;
	    cursor: pointer;
	}
	.banner .prev {
	    margin-left:-458px;
	    background-position: 10px -275px;
	}
	.banner .next {
	    margin-left:416px;
	    background-position: 10px -335px;
	}
	.banner .indicator {
	    position: absolute;
	    width: 100%;
	    left:0;
	    bottom:10px;
	    text-align: center;
	    z-index: 20;
	}
	.banner .indicator a {
	    display: inline-block;
	    width: 14px;
	    height: 14px;
	    border-radius: 50%;
	    background: #ccc;
	    margin: 0 5px;
	}
	.banner .indicator a.cur {
	    background: #f90;
	} 
	/*首页主体内容*/
	.title {
	    height: 38px;
	    border-bottom: 2px solid #ddd;
	    font-weight: lighter;
	    margin-top: 20px;
	}
	.title>span {
	    float: left;
	    min-width: 100px;
	    line-height: 38px;
	    text-align: center;
	    font-size: 18px;
	    border-bottom: 2px solid #57bc4c;
	}
	.title>a {
	    float: right;
	    font-size: 14px;
	    color: #999;
	    margin-top:12px;
	}
	.title>a:hover {
	    color: #f60;
	}
	/*课程列表*/
	.course>li {
	    float: left;
	    margin: 20px 40px 0 0;
	}
	.course>li:nth-child(4n) {
	    margin-right:0;
	}
	.course>li>a,.course>li>a>img,.course>li>p,.course>li>strong {
		width:220px;
	    display: block;
	}
	.course>li>a.a_img {
		border-radius: 5px;
	    overflow: hidden;
	}
	.course>li>a>img {
	    transition: all .5s;
	}
	.course>li:hover img {
	    transform:scale(1.1,1.1) ;
	}
	.course>li>a.a_text {
	    font-size: 14px;
	    line-height: 18px;
	    margin-top: 10px;
		overflow:hidden;
		white-space:nowrap;
		text-overflow:ellipsis;
	
	}
	.course>li>p {
	    color: #999;
	}
	.course>li>strong {
	    font-size: 16px;
	    color: #f60;
	    font-weight: bold;
	}
	/*名师堂*/
	.ind_teacher {
	    margin-top: 20px;
	}
	.ind_teacher>li {
	    float: left;
	    margin-right: 25px;
	    text-align:left;
	}
	.ind_teacher>li:last-child {
	    margin-right: 0;
	}
	.ind_teacher>li>a,.ind_teacher>li>a>img,.ind_teacher>li>span {
		width:220px;
	    display: block;
		overflow:hidden;
		white-space:nowrap;
		text-overflow:ellipsis;
	}
	.ind_teacher>li>a>img{
		border-radius: 5px;
	}
	.ind_teacher>li>p {
	    font-size: 14px;
	    line-height: 20px;
	    margin-top: 8px;
	
	}
	.ind_teacher>li>span {
	    color: #999;
	}
</style>
